/*
const DOWNCLS = 'fa-sort-down';
const UPCLS = 'fa-sort-up';
*/
const sortCardsBy = new ReactiveVar('');
let exanded = false;
Template.boardMenuPopup.events({
  'click .js-rename-board': Popup.open('boardChangeTitle'),
  'click .js-custom-fields'() {
    Sidebar.setView('customFields');
    Popup.close();
  },
  'click .js-open-archives'() {
    Sidebar.setView('archives');
    Popup.close();
  },
  'click .js-change-board-color': () => {
    Popup.open('boardChangeColor');
    const currentBoard = Boards.findOne(Session.get('currentBoard'));
    const newColor = currentBoard.color;
    // document.querySelector(".board-wrapper").classList[1]
    if (newColor == 'leangoo') {
      document.body.style.background = '#0e74af';
    } else if (
      getComputedStyle(document.querySelector('.ui-sortable'))
        .backgroundColor == 'rgba(0, 0, 0, 0)'
    ) {
      document.body.style.background = '#dedede';
    } else if (
      getComputedStyle(
        document.querySelector('.ui-sortable'),
      ).background.indexOf('linear-gradient') > 0
    ) {
      document.body.style.background =
        'rgba(0, 0, 0, 0) linear-gradient(135deg, rgb(73, 155, 234) 0%, rgb(0, 174, 204) 100%) repeat scroll 0% 0% / auto padding-box border-box';
    } else {
      document.body.style.background = getComputedStyle(
        document.querySelector('.ui-sortable'),
      ).backgroundColor;
    }
  },
  'click .js-change-language': Popup.open('changeLanguage'),
  'click .js-archive-board ': Popup.afterConfirm('archiveBoard', function() {
    const currentBoard = Boards.findOne(Session.get('currentBoard'));
    currentBoard.archive();
    // XXX We should have some kind of notification on top of the page to
    // confirm that the board was successfully archived.
    if (Utils.isMiniScreen()) {
      FlowRouter.go('home');
    } else {
      FlowRouter.go('newHome');
    }
  }),
  'click .js-delete-board': Popup.afterConfirm('deleteBoard', function() {
    const currentBoard = Boards.findOne(Session.get('currentBoard'));
    Popup.close();
    Boards.remove(currentBoard._id);
    if (Utils.isMiniScreen()) {
      FlowRouter.go('home');
    } else {
      FlowRouter.go('newHome');
    }
  }),
  'click .js-outgoing-webhooks': Popup.open('outgoingWebhooks'),
  'click .js-import-board': Popup.open('chooseBoardSource'),
  'click .js-subtask-settings': Popup.open('boardSubtaskSettings'),
  'click .js-card-settings': Popup.open('boardCardSettings'),
});

Template.boardChangeTitlePopup.events({
  submit(event, templateInstance) {
    const newTitle = templateInstance
      .$('.js-board-name')
      .val()
      .trim();
    const newDesc = templateInstance
      .$('.js-board-desc')
      .val()
      .trim();
    if (newTitle) {
      this.rename(newTitle);
      this.setDescription(newDesc);
      Popup.close();
    }
    event.preventDefault();
  },
});

Template.importMindMap.events({
  'change .js-attach-mindMap'(event) {
    var fileInput = document.getElementById('fileInput');
    //  fileInput.addEventListener('change', function(e) {
    var file = fileInput.files[0],
      // textType = /(md|km)/,
      fileType = file.name.substr(file.name.lastIndexOf('.') + 1);
    //console.log(file);
    switch (fileType) {
      case 'md':
        fileType = 'markdown';
        break;
      case 'txt':
        fileType = 'text';
        break;
      case 'km':
      case 'json':
        fileType = 'json';
        break;
      default:
        //console.log("File not supported!");
        alert('只支持.km、.json文件');
        return;
    }
    var reader = new FileReader();
    reader.onload = function(e) {
      var content = reader.result;

      this.mindMapId = new ReactiveVar('');
      const name = '我的脑图';
      this.mindMapId.set(
        MindMaps.insert({
          name,
          content,
        }),
      );
      const mindMapUrl =
        '/mindMap/dist/index.html?userId=' +
        '&mindMapId=' +
        this.mindMapId.get();
      window.location.href = mindMapUrl;
      // editor.minder.importData(fileType, content).then(function(data) {
      //   console.log(data)
      //   $(fileInput).val('');
      // });
    };
    reader.readAsText(file);
    //  });
  },
  'click .js-import-mindMap'(event, templateInstance) {
    templateInstance.find('.js-attach-mindMap').click();
    event.preventDefault();
  },
});

BlazeComponent.extendComponent({
  watchLevel() {
    const currentBoard = Boards.findOne(Session.get('currentBoard'));
    return currentBoard && currentBoard.getWatchLevel(Meteor.userId());
  },

  isStarred() {
    const boardId = Session.get('currentBoard');
    const user = Meteor.user();
    return user && user.hasStarred(boardId);
  },

  // Only show the star counter if the number of star is greater than 2
  showStarCounter() {
    const currentBoard = Boards.findOne(Session.get('currentBoard'));
    return currentBoard && currentBoard.stars >= 2;
  },
  /*
  showSort() {
    return Meteor.user().hasSortBy();
  },
  directionClass() {
    return this.currentDirection() === -1 ? DOWNCLS : UPCLS;
  },
  changeDirection() {
    const direction = 0 - this.currentDirection() === -1 ? '-' : '';
    Meteor.call('setListSortBy', direction + this.currentListSortBy());
  },
  currentDirection() {
    return Meteor.user().getListSortByDirection();
  },
  currentListSortBy() {
    return Meteor.user().getListSortBy();
  },
  listSortShortDesc() {
    return `list-label-short-${this.currentListSortBy()}`;
  },
  */
  events() {
    return [
      {
        'click .js-edit-board-title': Popup.open('boardChangeTitle'),
        'click .js-star-board'() {
          Meteor.user().toggleBoardStar(Session.get('currentBoard'));
        },
        'click .js-open-board-menu': Popup.open('boardMenu'),
        'click .js-change-visibility': Popup.open('boardChangeVisibility'),
        'click .js-watch-board': Popup.open('boardChangeWatch'),
        'click .js-open-archived-board'() {
          Modal.open('archivedBoards');
        },
        'click .js-toggle-board-view': Popup.open('boardChangeView'),
        'click .js-toggle-sidebar'() {
          Sidebar.toggle();
        },
        'click .js-open-filter-view'() {
          if (Sidebar.isOpen() && Sidebar.getView() === 'filter') {
            Sidebar.toggle();
          } else {
            Sidebar.setView('filter');
          }
        },
        'click .js-open-statistics-view'() {
          // Sidebar.setView('filter');
          Modal.open('statisticsIndexBoard');
          window.setImmediate(function() {
            if (!exanded) {
              document.getElementsByClassName(
                'modal-content',
              )[0].style.margin = 0;
              document.getElementsByClassName(
                'modal-header',
              )[0].style.borderRadius = '0px';
              // document.getElementsByClassName("modal-content")[0].style.borderradius="0px";
              document.getElementsByClassName(
                'modal-container',
              )[0].style.width = '100%';
              document.getElementsByClassName(
                'modal-container',
              )[0].style.height = '100%';
              document.getElementsByClassName(
                'modal-content',
              )[0].style.margin = 0;
              document
                .getElementsByClassName('expandS')[0]
                .classList.remove('fa-expand');
              document
                .getElementsByClassName('expandS')[0]
                .classList.add('fa-compress');
              document.getElementsByClassName(
                'modal-content',
              )[0].style.inset = 0;
              $('#modal-content').draggable('disable');
              document.getElementsByClassName('expandS')[0].style.opacity = 1;
              // document.getElementsByClassName(
              //   'modal-container',
              // )[0].style.transition = 'all 0.5s';
            } else {
              console.log(3242343243243);
              document.getElementsByClassName('modal-content')[0].style.margin =
                '20px auto';
              document.getElementsByClassName(
                'modal-header',
              )[0].style.borderRadius = '6px';
              // document.getElementsByClassName("modal-content")[0].style.borderRaduis="6px";
              document.getElementsByClassName(
                'modal-container',
              )[0].style.width = '900px';
              document.getElementsByClassName(
                'modal-container',
              )[0].style.height = 'auto';
              document
                .getElementsByClassName('expandS')[0]
                .classList.remove('fa-compress');
              document
                .getElementsByClassName('expandS')[0]
                .classList.add('fa-expand');
              $('#modal-content').draggable('enable');
              // document.getElementsByClassName(
              //   'modal-container',
              // )[0].style.transition = 'all 0.5s';
            }
            //exanded = !exanded;
            // exandedFlag = 0;
            this.pieChart && this.pieChart.resize();
            this.barChart && this.barChart.resize();
          }, 0);
          // window.setImmediate(function(){
          //   document.querySelector(".js-expandD").click();
          // },0)
        },
        'click .js-sort-cards': Popup.open('cardsSort'),
        /*
        'click .js-open-sort-view'(evt) {
          const target = evt.target;
          if (target.tagName === 'I') {
            // click on the text, popup choices
            this.changeDirection();
          } else {
            // change the sort order
            Popup.open('listsort')(evt);
          }
        },
        */
        'click .js-filter-reset'(event) {
          event.stopPropagation();
          Sidebar.setView();
          Filter.reset();
        },
        'click .js-sort-reset'() {
          Session.set('sortBy', '');
        },
        'click .js-open-search-view'() {
          if (Sidebar.isOpen() && Sidebar.getView() === 'search') {
            Sidebar.toggle();
          } else {
            Sidebar.setView('search');
          }
        },
        'click .js-multiselection-activate'() {
          const currentCard = Session.get('currentCard');
          MultiSelection.activate();
          if (currentCard) {
            MultiSelection.add(currentCard);
          }
        },
        'click .js-multiselection-reset'(event) {
          event.stopPropagation();
          MultiSelection.disable();
        },
        'click .js-log-in'() {
          //FlowRouter.go('atSignIn');
          if (Utils.isMiniScreen()) {
            FlowRouter.go('home');
          } else {
            FlowRouter.go('newHome');
          }
        },
      },
    ];
  },
}).register('boardHeaderBar');

Template.boardHeaderBar.helpers({
  canModifyBoard() {
    return (
      Meteor.user() &&
      Meteor.user().isBoardMember() &&
      !Meteor.user().isCommentOnly()
    );
  },
  boardView() {
    return Utils.boardView();
  },
  isSortActive() {
    return Session.get('sortBy') ? true : false;
  },
});

Template.boardChangeViewPopup.events({
  'click .js-open-lists-view'() {
    Utils.setBoardView('board-view-lists');
    Popup.close();
  },
  'click .js-open-swimlanes-view'() {
    Utils.setBoardView('board-view-swimlanes');
    Popup.close();
  },
  'click .js-open-cal-view'() {
    Utils.setBoardView('board-view-cal');
    Popup.close();
  },
});

const CreateBoard = BlazeComponent.extendComponent({
  template() {
    return 'createBoard';
  },

  onCreated() {
    this.visibilityMenuIsOpen = new ReactiveVar(false);
    this.visibility = new ReactiveVar('private');
    this.boardId = new ReactiveVar('');
  },

  visibilityCheck() {
    return this.currentData() === this.visibility.get();
  },

  setVisibility(visibility) {
    this.visibility.set(visibility);
    this.visibilityMenuIsOpen.set(false);
  },

  toggleVisibilityMenu() {
    this.visibilityMenuIsOpen.set(!this.visibilityMenuIsOpen.get());
  },

  onSubmit(event) {
    event.preventDefault();
    const title = this.find('.js-new-board-title').value;
    const visibility = this.visibility.get();

    this.boardId.set(
      Boards.insert({
        title,
        permission: visibility,
      }),
    );

    Swimlanes.insert({
      title: 'Default',
      boardId: this.boardId.get(),
    });

    Utils.goBoardId(this.boardId.get());
  },

  events() {
    return [
      {
        'click .js-select-visibility'() {
          this.setVisibility(this.currentData());
        },
        'click .js-change-visibility': this.toggleVisibilityMenu,
        'click .js-import': Popup.open('boardImportBoard'),
        submit: this.onSubmit,
        'click .js-import-board': Popup.open('chooseBoardSource'),
        'click .js-board-template': Popup.open('searchElement'),
      },
    ];
  },
}).register('createBoardPopup');

(class HeaderBarCreateBoard extends CreateBoard {
  onSubmit(event) {
    super.onSubmit(event);
    // Immediately star boards crated with the headerbar popup.
    Meteor.user().toggleBoardStar(this.boardId.get());
  }
}.register('headerBarCreateBoardPopup'));

const CreateMindMap = BlazeComponent.extendComponent({
  template() {
    return 'createMindMap';
  },

  onCreated() {
    this.mindMapId = new ReactiveVar('');

    // 导入
    window.onload = function() {
      var fileInput = document.getElementById('fileInput');

      fileInput.addEventListener('change', function(e) {
        var file = fileInput.files[0],
          // textType = /(md|km)/,
          fileType = file.name.substr(file.name.lastIndexOf('.') + 1);
        //console.log(file);
        switch (fileType) {
          case 'md':
            fileType = 'markdown';
            break;
          case 'txt':
            fileType = 'text';
            break;
          case 'km':
          case 'json':
            fileType = 'json';
            break;
          default:
            //console.log("File not supported!");
            alert('只支持.km、.md、、text、.json文件');
            return;
        }
        var reader = new FileReader();
        reader.onload = function(e) {
          var content = reader.result;
          editor.minder.importData(fileType, content).then(function(data) {
            console.log(data);
            $(fileInput).val('');
          });
        };
        reader.readAsText(file);
      });
    };
  },

  onSubmit(event) {
    event.preventDefault();
    const name = this.find('.js-new-mindMap-name').value;
    this.mindMapId.set(
      MindMaps.insert({
        name,
      }),
    );
    const mindMapUrl =
      '/mindMap/dist/index.html?' + 'mindMapId=' + this.mindMapId.get();
    window.location.href = mindMapUrl;
  },

  events() {
    return [
      {
        'click .js-import': Popup.open('boardImportBoard'),
        submit: this.onSubmit,
        'click .js-import-board': Popup.open('chooseBoardSource'),
        'click .js-board-template': Popup.open('searchElement'),
      },
    ];
  },
}).register('createMindMapPopup');

BlazeComponent.extendComponent({
  visibilityCheck() {
    const currentBoard = Boards.findOne(Session.get('currentBoard'));
    return this.currentData() === currentBoard.permission;
  },

  selectBoardVisibility() {
    const currentBoard = Boards.findOne(Session.get('currentBoard'));
    const visibility = this.currentData();
    currentBoard.setVisibility(visibility);
    Popup.close();
  },

  events() {
    return [
      {
        'click .js-select-visibility': this.selectBoardVisibility,
      },
    ];
  },
}).register('boardChangeVisibilityPopup');

BlazeComponent.extendComponent({
  watchLevel() {
    const currentBoard = Boards.findOne(Session.get('currentBoard'));
    return currentBoard.getWatchLevel(Meteor.userId());
  },

  watchCheck() {
    return this.currentData() === this.watchLevel();
  },

  events() {
    return [
      {
        'click .js-select-watch'() {
          const level = this.currentData();
          Meteor.call(
            'watch',
            'board',
            Session.get('currentBoard'),
            level,
            (err, ret) => {
              if (!err && ret) Popup.close();
            },
          );
        },
      },
    ];
  },
}).register('boardChangeWatchPopup');

/*
BlazeComponent.extendComponent({
  onCreated() {
    //this.sortBy = new ReactiveVar();
    ////this.sortDirection = new ReactiveVar();
    //this.setSortBy();
    this.downClass = DOWNCLS;
    this.upClass = UPCLS;
  },
  allowedSortValues() {
    const types = [];
    const pushed = {};
    Meteor.user()
      .getListSortTypes()
      .forEach(type => {
        const key = type.replace(/^-/, '');
        if (pushed[key] === undefined) {
          types.push({
            name: key,
            label: `list-label-${key}`,
            shortLabel: `list-label-short-${key}`,
          });
          pushed[key] = 1;
        }
      });
    return types;
  },
  Direction() {
    return Meteor.user().getListSortByDirection() === -1
      ? this.downClass
      : this.upClass;
  },
  sortby() {
    return Meteor.user().getListSortBy();
  },

  setSortBy(type = null) {
    const user = Meteor.user();
    if (type === null) {
      type = user._getListSortBy();
    } else {
      let value = '';
      if (type.map) {
        // is an array
        value = (type[1] === -1 ? '-' : '') + type[0];
      }
      Meteor.call('setListSortBy', value);
    }
    //this.sortBy.set(type[0]);
    //this.sortDirection.set(type[1]);
  },

  events() {
    return [
      {
        'click .js-sort-by'(evt) {
          evt.preventDefault();
          const target = evt.target;
          const sortby = target.getAttribute('name');
          const down = !!target.querySelector(`.${this.upClass}`);
          const direction = down ? -1 : 1;
          this.setSortBy([sortby, direction]);
          if (Utils.isMiniScreen) {
            Popup.close();
          }
        },
      },
    ];
  },
}).register('listsortPopup');
*/

BlazeComponent.extendComponent({
  events() {
    return [
      {
        'click .js-sort-due'() {
          const sortBy = {
            dueAt: 1,
          };
          Session.set('sortBy', sortBy);
          sortCardsBy.set(TAPi18n.__('due-date'));
          Popup.close();
        },
        'click .js-sort-title'() {
          const sortBy = {
            title: 1,
          };
          Session.set('sortBy', sortBy);
          sortCardsBy.set(TAPi18n.__('title'));
          Popup.close();
        },
        'click .js-sort-created-asc'() {
          const sortBy = {
            createdAt: 1,
          };
          Session.set('sortBy', sortBy);
          sortCardsBy.set(TAPi18n.__('date-created-newest-first'));
          Popup.close();
        },
        'click .js-sort-created-desc'() {
          const sortBy = {
            createdAt: -1,
          };
          Session.set('sortBy', sortBy);
          sortCardsBy.set(TAPi18n.__('date-created-oldest-first'));
          Popup.close();
        },
      },
    ];
  },
}).register('cardsSortPopup');
